<template>
  <div class="app-container">
    <!-- 头部导航 -->
    <div class="header">
      <div class="back-btn" @click="handleBack">
        <i class="fas fa-arrow-left"></i>
      </div>
      <div class="header-title">咨询详情</div>
      <div></div>
    </div>

    <div class="container">
      <!-- 状态卡片 -->
      <div class="status-card" v-if="hasBasicInfo">
        <div class="status-info">
          <h3>{{ consultation.ucName || "用户咨询" }}</h3>
          <p v-if="consultation.code">预约编号: {{ consultation.code }}</p>
        </div>
        <div
          class="status-badge"
          :class="getStatusClass(consultation.status)"
          v-if="consultation.status"
        >
          {{ consultation.status }}
        </div>
      </div>

      <!-- 咨询师信息卡片 -->
      <div class="consultant-card" v-if="hasConsultantInfo">
        <div class="consultant-header">
          <div class="consultant-avatar">
            <div class="avatar-placeholder">咨</div>
          </div>
          <div class="consultant-info">
            <div class="consultant-name">心理咨询师</div>
            <div class="consultant-title">专业咨询 | 贴心服务</div>
            <div class="consultant-tags">
              <div class="tag" v-if="consultation.presentProblemValue">
                {{ consultation.presentProblemValue }}
              </div>
              <div class="tag" v-if="consultation.appointmentTypeValue">
                {{ consultation.appointmentTypeValue }}
              </div>
            </div>
          </div>
        </div>

        <div class="consultant-stats">
          <div
            class="stat-box"
            v-if="
              consultation.xzCount !== undefined &&
              consultation.xzCount !== null
            "
          >
            <div class="stat-number">{{ consultation.xzCount }}</div>
            <div class="stat-title">咨询次数</div>
          </div>
          <div class="stat-box">
            <div class="stat-number">专业</div>
            <div class="stat-title">服务水准</div>
          </div>
          <div class="stat-box">
            <div class="stat-number">贴心</div>
            <div class="stat-title">服务态度</div>
          </div>
        </div>
      </div>

      <!-- 预约详情卡片 -->
      <div class="detail-section" v-if="hasAppointmentDetails">
        <div class="section-header">
          <i class="fas fa-calendar-alt"></i>
          <span>预约详情</span>
        </div>
        <div class="section-content">
          <div class="detail-item" v-if="consultation.counseldate">
            <div class="detail-icon">
              <i class="far fa-clock"></i>
            </div>
            <div class="detail-text">
              <h4>咨询时间</h4>
              <p>{{ formatCounselDate(consultation.counseldate) }}</p>
            </div>
          </div>

          <div class="detail-item" v-if="consultation.appointmentTypeValue">
            <div class="detail-icon">
              <i class="fas fa-phone"></i>
            </div>
            <div class="detail-text">
              <h4>咨询方式</h4>
              <p>
                {{ consultation.appointmentTypeValue }}<br />
                <span style="color: #666">根据预约类型进行咨询</span>
              </p>
            </div>
          </div>

          <div class="detail-item" v-if="consultation.intakeType">
            <div class="detail-icon">
              <i class="fas fa-info-circle"></i>
            </div>
            <div class="detail-text">
              <h4>咨询类型</h4>
              <p>
                类型编号: {{ consultation.intakeType }}<br />{{
                  getIntakeTypeText(consultation.intakeType)
                }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 问题描述卡片 -->
      <div class="detail-section" v-if="hasProblemInfo">
        <div class="section-header">
          <i class="fas fa-file-medical"></i>
          <span>问题描述</span>
        </div>
        <div class="section-content">
          <div class="detail-item" v-if="consultation.presentProblemValue">
            <div class="detail-icon">
              <i class="fas fa-question-circle"></i>
            </div>
            <div class="detail-text">
              <h4>咨询问题</h4>
              <div class="problem-content">
                {{ consultation.presentProblemValue }}
                <span
                  v-if="consultation.presentProblem"
                  style="
                    color: #666;
                    font-size: 12px;
                    margin-top: 5px;
                    display: block;
                  "
                >
                  <!-- 问题代码: {{ consultation.presentProblem }} -->
                </span>
              </div>
            </div>
          </div>

          <div class="detail-item" v-if="consultation.minutes">
            <div class="detail-icon">
              <i class="fas fa-sticky-note"></i>
            </div>
            <div class="detail-text">
              <h4>咨询时长</h4>
              <div class="problem-content">
                本次咨询时长: {{ consultation.minutes }} 分钟
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统信息卡片 -->
      <div class="detail-section" v-if="hasSystemInfo">
        <div class="section-header">
          <i class="fas fa-database"></i>
          <span>系统信息</span>
        </div>
        <div class="section-content">
          <div class="detail-item" v-if="consultation.id || consultation.iid">
            <div class="detail-icon">
              <i class="fas fa-id-card"></i>
            </div>
            <div class="detail-text">
              <h4>记录标识</h4>
              <p v-if="consultation.id">ID: {{ consultation.id }}</p>
              <p v-if="consultation.iid">IID: {{ consultation.iid }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态提示 -->
      <div class="empty-state" v-if="!hasData">
        <div class="empty-icon">
          <i class="fas fa-inbox"></i>
        </div>
        <div class="empty-text">暂无咨询详情数据</div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div
      v-if="showMessage"
      class="message"
      :style="{ backgroundColor: messageColor }"
    >
      {{ messageText }}
    </div>
  </div>
</template>

<script>
import { getIntakeById } from "@/api/user";

export default {
  name: "ConsultationDetail",
  data() {
    return {
      consultation: {},
      showMessage: false,
      messageText: "",
      messageColor: "",
      id: null,
      loading: false,
    };
  },
  computed: {
    // 计算属性来判断各个模块是否有数据
    hasBasicInfo() {
      return (
        this.consultation.ucName ||
        this.consultation.code ||
        this.consultation.status
      );
    },
    hasConsultantInfo() {
      return (
        this.consultation.presentProblemValue ||
        this.consultation.appointmentTypeValue ||
        this.consultation.xzCount !== undefined
      );
    },
    hasAppointmentDetails() {
      return (
        this.consultation.counseldate ||
        this.consultation.appointmentTypeValue ||
        this.consultation.intakeType
      );
    },
    hasProblemInfo() {
      return this.consultation.presentProblemValue || this.consultation.minutes;
    },
    hasSystemInfo() {
      return this.consultation.id || this.consultation.iid;
    },
    hasData() {
      return (
        this.hasBasicInfo ||
        this.hasConsultantInfo ||
        this.hasAppointmentDetails ||
        this.hasProblemInfo ||
        this.hasSystemInfo
      );
    },
  },
  created() {
    this.fetchConsultationDetail();
  },
  methods: {
    fetchConsultationDetail() {
      // 从路由参数中获取ID
      this.id = this.$route.query.id;
      if (!this.id) {
        this.showMessage = true;
        this.messageText = "预约记录ID不存在";
        this.messageColor = "#ff6b6b";
        return;
      }

      this.loading = true;
      let data = { id: this.id };

      getIntakeById(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 200) {
            this.consultation = res.data || {};
            if (!this.hasData) {
              this.showMessage = true;
              this.messageText = "获取到的数据为空";
              this.messageColor = "#ffc046";
              this.hideMessage();
            }
          } else {
            this.showMessage = true;
            this.messageText = res.msg || "获取预约详情失败";
            this.messageColor = "#ff6b6b";
            this.hideMessage();
          }
        })
        .catch((error) => {
          this.loading = false;
          this.showMessage = true;
          this.messageText = "网络请求失败，请稍后重试";
          this.messageColor = "#ff6b6b";
          this.hideMessage();
          console.error("获取咨询详情失败:", error);
        });
    },

    handleBack() {
      this.showMessage = true;
      this.messageText = "返回预约记录列表";
      this.messageColor = "#5b67ff";
      this.hideMessage();

      // 实际应用中这里应该是返回上一页
      this.$router.go(-1);
    },

    hideMessage() {
      setTimeout(() => {
        this.showMessage = false;
      }, 3000);
    },

    getStatusClass(status) {
      if (!status) return "status-unknown";

      switch (status) {
        case "待开始":
          return "status-pending";
        case "已完成":
          return "status-completed";
        case "进行中":
          return "status-processing";
        case "已取消":
          return "status-cancelled";
        default:
          return "status-unknown";
      }
    },

    formatCounselDate(dateString) {
      if (!dateString) return "暂无时间信息";

      // 移除末尾的 ".0"
      const cleanDateString = dateString.replace(/\.0$/, "");
      const date = new Date(cleanDateString);

      if (isNaN(date.getTime())) {
        return dateString;
      }

      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");

      return `${year}年${month}月${day}日 ${hours}:${minutes}`;
    },

    getIntakeTypeText(type) {
      if (!type) return "未知类型";

      const typeMap = {
        1: "初次咨询",
        2: "后续咨询",
        3: "紧急咨询",
        4: "常规咨询",
      };
      return typeMap[type] || "其他类型咨询";
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.app-container {
  background: linear-gradient(135deg, #f9faff 0%, #f5f7ff 100%);
  color: #1a233d;
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 80px;
  font-size: 15px;
}

.container {
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

/* 头部导航 */
.header {
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a233d;
}

.back-btn,
.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
  font-size: 16px;
}

/* 状态卡片 */
.status-card {
  background: white;
  border-radius: 18px;
  padding: 22px 20px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.4s ease forwards;
  opacity: 0;
}

.status-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.status-info p {
  font-size: 0.95rem;
  color: #8a94a6;
}

.status-badge {
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}

.status-completed {
  background: rgba(72, 213, 151, 0.15);
  color: #48d597;
}

.status-pending {
  background: rgba(255, 192, 70, 0.15);
  color: #ffc046;
}

.status-processing {
  background: rgba(91, 103, 255, 0.15);
  color: #5b67ff;
}

.status-cancelled {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.status-unknown {
  background: rgba(176, 184, 197, 0.15);
  color: #8a94a6;
}

/* 咨询师信息卡片 */
.consultant-card {
  background: white;
  border-radius: 18px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
  animation-delay: 0.1s;
}

.consultant-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7ebf3;
}

.consultant-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b67ff, #8c52ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  position: relative;
}

.avatar-placeholder {
  font-size: 1.5rem;
  color: white;
  font-weight: 600;
}

.consultant-info {
  flex: 1;
}

.consultant-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1a233d;
}

.consultant-title {
  font-size: 0.95rem;
  color: #5b67ff;
  font-weight: 500;
  margin-bottom: 8px;
}

.consultant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  background: #eef0ff;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #5b67ff;
}

.consultant-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  text-align: center;
  margin-top: 15px;
}

.stat-box {
  padding: 12px;
  background: #eef0ff;
  border-radius: 14px;
}

.stat-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: #5b67ff;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 0.85rem;
  color: #8a94a6;
}

/* 详情卡片 */
.detail-section {
  background: white;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 25px rgba(134, 151, 206, 0.15);
  margin: 20px 0;
  overflow: hidden;
  animation: fadeIn 0.6s ease forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

.section-header {
  padding: 20px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a233d;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e7ebf3;
}

.section-header i {
  color: #5b67ff;
  font-size: 1.2rem;
}

.section-content {
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7ebf3;
}

.detail-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-right: 16px;
}

.detail-text {
  flex: 1;
}

.detail-text h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a233d;
}

.detail-text p {
  font-size: 0.95rem;
  color: #8a94a6;
  line-height: 1.6;
}

/* 问题描述 */
.problem-content {
  background: #eef0ff;
  border-radius: 15px;
  padding: 16px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: #1a233d;
  line-height: 1.7;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #8a94a6;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #e7ebf3;
}

.empty-text {
  font-size: 1.1rem;
}

/* 消息提示 */
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: fadeIn 0.5s;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .consultant-stats {
    grid-template-columns: 1fr;
  }

  .action-btn-large {
    font-size: 0.95rem;
  }

  .consultant-avatar {
    width: 60px;
    height: 60px;
  }

  .avatar-placeholder {
    font-size: 1.3rem;
  }

  .consultant-name {
    font-size: 1.15rem;
  }
}
</style>
